<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    .spinner {
        margin: 100px auto;
        width: 50px;
        height: 60px;
        text-align: center;
        font-size: 10px;
    }

    .spinner>div {
        background-color: #67CF22;
        height: 100%;
        width: 6px;
        display: inline-block;

        -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
        animation: stretchdelay 1.2s infinite ease-in-out;
    }

    .spinner .rect2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .spinner .rect3 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    .spinner .rect4 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    .spinner .rect5 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

    @-webkit-keyframes stretchdelay {
        0%,
        40%,
        100% {
            -webkit-transform: scaleY(0.4)
        }
        20% {
            -webkit-transform: scaleY(1.0)
        }
    }

    @keyframes stretchdelay {
        0%,
        40%,
        100% {
            transform: scaleY(0.4);
            -webkit-transform: scaleY(0.4);
        }
        20% {
            transform: scaleY(1.0);
            -webkit-transform: scaleY(1.0);
        }
    }
    </style>
</head>

<body>
    <div id="app">
    </div>
    <script type="text/javascript" src="./vue.min.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <script type="text/javascript">
    var App = {
        data() {
            return {
                isShow: false
            }
        },
        template: `
				<div>
					<div class="spinner" v-show = 'isShow'>
					  <div class="rect1"></div>
					  <div class="rect2"></div>
					  <div class="rect3"></div>
					  <div class="rect4"></div>
					  <div class="rect5"></div>
					</div>
					<button @click = 'sendAjax'>发请求</button>
				</div>

			`,
        methods: {
            sendAjax() {
            	//实现一个类似cookie的机制

            	// 


                // 添加请求拦截器
                this.$axios.interceptors.request.use((config)=> {
                	console.log(config);
                    // 在发送请求之前做些什么
                    var token = localStorage.getItem('token');
                    if (token) {
                    	config.headers['token'] = token;
                    }

                    this.isShow = true;
                    return config;
                }, function(error) {
                    // 对请求错误做些什么
                    return Promise.reject(error);
                });

                // 添加响应拦截器
                this.$axios.interceptors.response.use((response) =>{
                    // 对响应数据做点什么
                    console.log(response.data.token);
                    if (response.data.token) {
                    	localStorage.setItem('token', response.data.token);
                    }
                    this.isShow = false;
                    return response;
                }, function(error) {
                    // 对响应错误做点什么
                    return Promise.reject(error);
                });

                this.$axios.get('http://127.0.0.1:8888/')
                .then(res=>{
                	console.log(res);
                })
                .catch(err=>{
                	console.log(err);
                })
            }
        }

    };

    Vue.prototype.$axios = axios

    new Vue({
        el: '#app',
        template: `<App />`,
        components: {
            App
        }
    });
    </script>
</body>

</html>